<template>
  <div class="a-container">
    <div>A组件-{{ money }}</div>
    <div>饮料-{{ drink }}</div>
    <div class="wrap">
      <BCom :money="money" @sendDrink="sendDrink" />
      <CCom :drink="drink"/>
    </div>
  </div>
</template>

<script setup>
import BCom from './BCom.vue';
import CCom from './CCom.vue';
import { ref } from 'vue'
defineProps(['money'])
const drink = ref('')

const sendDrink = (data) => {
  console.log('父组件收到了', data)
  drink.value = data
}
</script>

<style>
.a-container {
  border: 5px solid #6a3939;
  padding: 6px;
  width: 800px;
  height: 400px;
  margin: 10px auto;
}

.a-container .wrap {
  display: flex;
}
</style>
